<template>
  <div style="background-color: white;">
    <div style="margin-left: 10px;">
      <el-form class="demo-form-inline" :inline="true">
        <el-form-item label="日记内容">
          <el-input style="width: 500px"
                    placeholder="请输入内容"
                    v-model="diaryValue"
                    clearable>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button
              type="success"
              size="mini"
              @click="addDiray()">提交
          </el-button>
        </el-form-item>
        <el-table
            :data="pageInfo.list"
            style="width: 1115px"
            :stripe=true
            :border=true
            height="500">
          <el-table-column
              prop="txt"
              label="日志内容"
              width="550">
          </el-table-column>
          <el-table-column
              label="更新时间"
              width="250">
            <template slot-scope="scope">
              <span>{{ makeDate(scope.row.time) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template slot-scope="scope">
              <el-button
                  type="success"
                  size="mini"
                  @click="showUpdate(scope.row.id,scope.row.txt)">编辑
              </el-button>
              <el-button
                  type="danger"
                  size="mini"
                  @click="">删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="float: right">
          <el-pagination
              background
              layout="prev, pager, next"
              :total="pageInfo.total"
              :page-size="pageInfo.pageSize"
              @current-change="handlePage"
          >
          </el-pagination>
        </div>
      </el-form>
    <el-dialog title="修改更新日志" :visible.sync="isUpdate" center>
      <el-form :inline="true">
        <el-form-item label="修改内容" prop="region">
          <el-input v-model="updateValue"  placeholder="updateValue" clearable style="width: 500px"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isUpdate = false">取 消</el-button>
        <el-button type="primary" @click="isAddClassify = saveOrUpdateDiray(id,updateValue)">更改</el-button>
      </div>
    </el-dialog>
    </div>
  </div>
</template>

<script>
import {makeDate} from "../../assets/js/dateformat"

export default {
  name: "diaryManagement",
  data() {
    return {
      id: '',
      page: 1,
      diaryValue: '',//新增值
      pageInfo: '',
      isUpdate: false,
      updateValue:'',//修改内容
    }
  },
  methods: {
    getDiaryList() {
      this.$ajax.post(this.$config.url +`/ljblog/Diary/getDiaryList/${this.page}`)
          .then(res => {
            console.log(res.data);
            this.pageInfo = res.data;
          })
    },
    handlePage(val) {
      this.page = val;
      this.getDiaryList();
    },
    addDiray() {
      this.saveOrUpdateDiray(null,this.diaryValue);
    },
    updateDiray() {

    },
    saveOrUpdateDiray(id,value) {
      this.$ajax.post(this.$config.url +`/ljblog/Diary/saveOrUpdate`, {
        "id": id,
        "txt": value,
      }).then(res => {
        console.log(res);
        if (res.data === true) {
          this.$message.success("日志更新成功");
          this.getDiaryList();
        }
      })
    },
    makeDate(date) {
      return makeDate(date);
    },
    showUpdate(id,value) {
      if (id !== '' && id !== undefined) {
        this.id = id;
        this.updateValue=value;
        this.isUpdate = true;
      } else {
        this.$message.error("获取ID失败")
      }
    }
  },
  mounted() {
    this.getDiaryList();
  }
}
</script>

<style scoped>

</style>